<template>
    <div class="bookTab">
        <van-checkbox v-show="flat" @click="del" v-model="checked" checked-color="#fdcbf1"></van-checkbox>
        <div class="bookImg" @click="jumpPathTo(item.uid)">
            <img :src="bookObj.vertical_cover" alt="" />
        </div>
        <div class="bookTitle" @click="jumpPathTo(item.uid)">{{ bookObj.title }}</div>
        <div class="bookInfo">{{ see }}</div>
    </div>
</template>

<script>
import { comicDetail } from "../request";

export default {
    props: ["item", "flat"],
    name: "bookCom",
    data() {
        return {
            uid: 0,
            bookObj: {},
            page: 0,
            checked: false,
        };
    },
    computed: {
        see() {
            if (this.page > 0) {
                return `观看至${this.page}话`;
            } else if (this.page == 0) {
                return "未观看";
            }
        },
    },
    methods: {
        getBook() {
            comicDetail({ comic_id: this.uid }).then((data) => {
                this.bookObj = data.data;
            });
        },
        jumpPathTo(x) {
            this.$router.push({ path: `/details/${x}`, query: { id: x } });
        },
        del() {
            this.$emit("del", { id: this.item["uid"] });
        },
    },
    created() {
        this.uid = this.item.uid;
        let bookData = JSON.parse(localStorage.getItem("record"));
        let bookLogin = JSON.parse(localStorage.getItem("loginUser"));
        if (bookData) {
            let iIndex = bookData.findIndex((item) => {
                return item["uid"] == this.uid && item["yyid"] == bookLogin.username;
            });
            if (bookData[iIndex] != undefined) {
                this.page = Number(bookData[iIndex]["num"]) + 1;
            } else {
                this.page = 0;
            }
        }

        this.getBook();
        this.checked = false;
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.bookTab {
    height: 4.8rem;
    width: 2.62rem;
    padding: 8px;
    position: relative;
    .van-checkbox {
        position: absolute;
        bottom: 0.2667rem;
        right: 0.1067rem;
        z-index: 2;
    }
    .bookImg {
        width: 2.62rem;
        height: 3.68rem;

        img {
            width: 100%;
            height: 3.68rem;
        }
    }
    .bookTitle {
        height: 0.48rem;
        margin-top: 0.2133rem;
        font-size: 0.3733rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .bookInfo {
        height: 0.4267rem;
        font-size: 0.32rem;
    }
}
</style>
